import { useRequest } from 'alova/client'
import { VChart } from '@visactor/react-vchart'
import { useState, useEffect, useRef } from 'react'

import { Http } from '../Utils/Api'
import { AdminRouter } from '../Config/default'
import { ChartsConfig } from '../Config/ChartsConfig'
import { getNestedValue, strOfurlParamsFunc, setVChartsFieldsA02 } from '../Utils'

const defaultData = [
    { xField: 0, x2Field: 5, seriesField: 'China', yField: 3054 },
    { xField: 0, x2Field: 5, seriesField: 'USA', yField: 3054 },
    { xField: 5, x2Field: 10, seriesField: 'China', yField: 12814 },
    { xField: 5, x2Field: 10, seriesField: 'USA', yField: 12814 },
    { xField: 10, x2Field: 15, seriesField: 'China', yField: 5067 },
    { xField: 10, x2Field: 15, seriesField: 'USA', yField: 5067 },
    { xField: 15, x2Field: 20, seriesField: 'China', yField: 13012 },
    { xField: 15, x2Field: 20, seriesField: 'USA', yField: 13012 },
    { xField: 20, x2Field: 25, seriesField: 'China', yField: 7004 },
    { xField: 20, x2Field: 25, seriesField: 'USA', yField: 7004 },
    { xField: 25, x2Field: 30, seriesField: 'China', yField: 11624 },
    { xField: 25, x2Field: 30, seriesField: 'USA', yField: 11624 },
    { xField: 30, x2Field: 35, seriesField: 'China', yField: 9054 },
    { xField: 30, x2Field: 35, seriesField: 'USA', yField: 9054 },
    { xField: 35, x2Field: 40, seriesField: 'China', yField: 8814 },
    { xField: 35, x2Field: 40, seriesField: 'USA', yField: 8814 },
]

const array = [

]

const TempChartsA03 = ({ mode, config, apiData }) => {
    const chartRef = useRef()
    const { send } = useRequest(data => Http(data), { immediate: false })
    const [Spec, setSpec] = useState()


    const setSpecFunc = (data) => {
        const { axes_setUp, legends_setUp, mark_line, mark_point, scroll_Bar, type, stack, percent, direction, group, background, padding, ...item } = config || AdminRouter.Chart03

        const axes = ChartsConfig.setAxes(axes_setUp)
        const title = ChartsConfig.setTitle(item)
        const legends = ChartsConfig.setLegends(legends_setUp)
        const label = ChartsConfig.setLabel(item)
        const tooltip = ChartsConfig.setTooltip(item)
        const crosshair = ChartsConfig.setCrosshair(item)
        const totalLabel = ChartsConfig.setTotalLabel(item)
        const markLine = ChartsConfig.setMarkLine(mark_line)
        const markPoint = ChartsConfig.setMarkPoint(mark_point)
        const scrollBar = ChartsConfig.setScrollBar(scroll_Bar)
        const bar = ChartsConfig.setBar(item)
        const barBackground = ChartsConfig.setBarBackground(item)

        setSpec({
            type,
            data: { values: data || defaultData },
            color: data ? data.map(item => item.color || '#13c2c2') : ChartsConfig.DefaultColor,
            background,
            direction,
            padding,
            ...setVChartsFieldsA02(direction, group),
            axes,
            title,
            legends,
            label,
            tooltip,
            crosshair,
            totalLabel,
            markLine,
            markPoint,
            scrollBar,
            bar,
            barBackground,
        })
    }

    useEffect(() => {
        if (mode) {
            const { api, apiName, apiMethod, apiUrl, apiParams, level } = mode
            if (api) {
                const data = apiData.find(v => v.name === apiName)
                const levels = level?.split(',')
                const DATA = level ? data?.data[levels.join('.')] : data?.data
                if (DATA && config?.field?.length !== 0) {
                    const arr = DATA.flatMap(item => {
                        return config.field.map(key => ({
                            uuid: item.uuid,
                            color: key.color,
                            seriesField: key.title,
                            xField: item[key.group],
                            yField: item[key.field],
                        }))
                    })
                    setSpecFunc(arr)
                } else setSpecFunc()
            } else setSpecFunc()
        } else setSpecFunc()
    }, [mode, apiData])

    const optionsData = { disableDirtyBounds: true, options3d: { enable: true, enableView3dTransform: true, center: { x: 500, y: 250 } } }
    if (Spec) return <VChart className='ChartsClass' ref={chartRef} spec={Spec} options={optionsData} />
};

export default TempChartsA03